<template>
  <div class="price-index" v-if="index.indexs.length > 0">
    <!--{{ index }}-->
    <header class="header text-overflow" :title="index.indexName">{{ index.indexName }}</header>
    <section>
      <div class="price-index-item" v-for="item in index.indexs">
        <!--品名-->
        <p class="product text-overflow" :title="item.value2">{{ item.value2 }}</p>

        <!--规格-->
        <p class="spec text-overflow" :title="item.value3">{{ item.value3 }}</p>


        <p class="price-info" :class="{'rise': item.value5 > 0, 'drop': item.value5 < 0}">
          <!--价格-->
          <span class="price">{{ item.value4 }}</span>

          <!--上升/下降/持平 icons-->
          <i class="icon icon-rise" v-if="item.value5 > 0"></i>

          <i class="icon icon-drop" v-if="item.value5 < 0"></i>

          <i class="icon icon-flat" v-if="item.value5 == 0"></i>

          <!--涨跌值-->
          <span class="rose">{{ (item.value5 > 0 ? '+' : '') + (item.value5 == 0 ? '持平' : item.value5) }}</span>

        </p>
      </div>
    </section>
  </div>
</template>

<script>
  export default {
    props: {
      index: {
        type: Object,
        'default' () {
          return {}
        }
      }
    }
  }
</script>

<style lang="scss" type="text/scss" scoped>
  %triangle {
    content: "";
    position: absolute;
    border: 2px solid transparent;
    height: 0;
    overflow: hidden;
    top: 0;
  }

  .spec {
    padding: 6px 0;
    color: #9e9e9e;
  }

  .price {
    font-size: 26px;
    color: inherit;
    vertical-align: middle;
    display: inline-block;
  }

  .rose {
    font-weight: bold;
  }

  .icon {
    margin: 0 20px 0 10px;
  }

  .price-index {
    width: 230px;
    border: 1px solid #ffda9b;
    border-radius: 4px;
    background-color: #fff;
    position: relative;
    text-align: center;
    padding: 36px 10px 0;
  }

  .price-info {
    color: #6e6e6e;

    .icon{
      background-size: 100%;
    }

    &.rise {
      color: #ef4545;
    }
    &.drop {
      color: #71a338;
    }
  }

  .header {
    position: absolute;
    background: #ffa201;
    width: 130px;
    line-height: 34px;
    left: 50%;
    top: -4px;
    transform: translateX(-50%);
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    color: #fff;

    &:before {
      @extend %triangle;
      border-right-color: #af7500;
      border-bottom-color: #af7500;
      left: -4px;
    }
    &:after {
      @extend %triangle;
      border-left-color: #af7500;
      border-bottom-color: #af7500;
      right: -4px;
    }

  }

  .price-index-item {
    padding: 20px 0;
    p {
      margin: 0;
    }

    & + .price-index-item {
      border-top: 1px solid #dedede;
    }
  }
</style>
